<template>
	<!-- 先判断 props.dataToShow 是否存在且是有效的数组，只有满足条件才进行后续渲染 -->
	<view v-if="props.dataToShow && Array.isArray(props.dataToShow) && props.dataToShow.length > 0">
		<!-- 使用 template 标签包裹 v-for 循环部分，进一步确保内部渲染逻辑的前置条件满足 -->
		<template v-for="(item, index) in props.dataToShow" :key="index">
			<!-- 这里再次加强对 item 的类型判断，确保其是符合预期结构的对象且有 type 属性 -->
			<view v-if="typeof item == 'object' && item!== null && 'type' in item">
				<!-- 根据不同的 item.type 值进行不同类型数据的渲染 -->
				<view v-if="item.type == 'customerDynamic'" class="box">
					<view class="top">
						<view class="touxiang">
							<image style="width: 100%; height: 100%; border-radius: 50%;"
								src="../static/u=3751317455,2980380885&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp"
								mode="aspectFill" />
						</view>
						<view class="box_text">
							<view class="text_top">
								<view style="font-weight: bold; font-size: 24rpx; color: #222222;">
									<!-- 使用可选链操作符（?.）来更安全地访问对象属性，避免因属性不存在导致报错 -->
									{{ item.data.customerName || '无姓名' }}
								</view>
								<view class="bumen">
									{{ item.data.department || '无部门' }}
								</view>
							</view>
							<view class="text_button">
								{{ item.data.company || '无公司' }}
							</view>
						</view>
					</view>
					<view class="huifu">
						<view style="font-weight: 400; font-size: 24rpx; color: #999999; margin: 30rpx 0 18rpx 0;">
							回复了你：{{ item.data.reply || '暂无回复' }}
						</view>
					</view>
					<view class="tiwen">
						提问:{{ item.data.question || '无提问内容' }}
					</view>
					<view style="height: 3rpx; width: 100%; background-color: #DDDDDD; margin-top: 20rpx;"></view>
					<view class="date">
						回复时间：{{ item.data.replyTime || '无回复时间' }}
					</view>
				</view>
				<view v-if="item.type === 'taskMessage'" class="box_xxi">
					<view class="top_bt">
						<text style="font-weight: bold; font-size: 30rpx; color: #222222;">
							{{ item.data.person || '无相关人员' }}
						</text>
						<text style="margin-left: 20rpx;">终止了任务</text>
						<text style="color: #3278FF; font-weight: 400; font-size: 28rpx;">
							“{{ item.data.taskName || '无任务名称' }}"
						</text>
					</view>
					<view style="margin-top: 20rpx; font-weight: 400; font-size: 24rpx; color: #999999;">
						{{ item.data.time || '无时间记录' }}
					</view>
				</view>
				<view v-if="item.type === 'projectMessage'" class="ProjectMessages">
					<view class="topxmxi">
						<view style="display: flex; align-items: center;">
							<view class="logo">
								<image style="width: 100%; height: 100%; border-radius: 50%;"
									src="../static/u=3751317455,2980380885&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp"
									mode="aspectFill" />
							</view>
							<view class="biaoT">
								{{ item.data.projectName || '无项目名称' }}
							</view>
						</view>
						<view class="datesj">
							{{ item.data.time || '无时间记录' }}
						</view>
					</view>
					<view style="height: 2rpx; background-color: #EEEEEE; width: 100%; margin: 10rpx 0 20rpx 0;"></view>
					<view class="xmxi">
						{{ item.data.notice || '无通知内容' }}
					</view>
				</view>
			</view>
		</template>
	</view>
</template>
<script setup>
	import {
		defineProps,
		onMounted
	} from 'vue';

	const props = defineProps({
		dataToShow: {
			type: Array,
			default: () => []
		}
	});

	onMounted(() => {
		console.log('在微信小程序中 listdta 组件 onMounted 时 dataToShow:', props.dataToShow);
	});
</script>

<style scoped>
	.box {
		background: #FFFFFF;
		padding: 30rpx;
		margin: 0 auto;
		border-radius: 16rpx;
		margin-top: 20rpx;
	}

	.top {
		display: flex;
	}

	.touxiang {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: blue;
	}

	.text_top {
		display: flex;
	}

	.bumen {
		width: 80rpx;
		height: 30rpx;
		background: #EBF0FF;
		border-radius: 15rpx;
		font-weight: 400;
		font-size: 18rpx;
		color: #4170FF;
		line-height: 30rpx;
		text-align: center;
		margin-left: 10rpx;
	}

	.tiwen {
		font-weight: bold;
		font-size: 26rpx;
		color: #222222;
		background: #F6F6F6;
		border-radius: 8rpx;
		padding: 12rpx 20rpx 14rpx 20rpx;
	}

	.date {
		margin-top: 18rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
	}

	.box_xxi {
		padding: 34rpx 50rpx 32rpx 50rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: pink;
	}

	.topxmxi {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.biaoT {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin-left: 15rpx;
	}

	.ProjectMessages {
		background-color: #FFFFFF;
		padding: 18rpx 20rpx 28rpx 20rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.text_button {
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
	}

	.box_text {
		margin-left: 20rpx;
	}

	.datesj {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.xmxi {
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
	}
</style>